I'll probably be ripped to shreds for this question, but here we go.
We've all seen the dreadful:
Refused to apply style from <URL> because its MIME type <TYPE> is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Its origin and fix are typically project-oriented, and countless answers on StackOverflow offer countless solutions, many of which can't be applied generically. Here's a peculiar situation, which I can't seem to wrap my head around, given that I mainly work on the back-end:
<link type="text/css" rel="stylesheet" th:href="@{/real-fun/css/stylesheet.css}">
<link type="stylesheet/css" rel="stylesheet" th:href="@{/real-fun/css/tail.select-light.css}">
I'm using Thymeleaf as the templating/server-side rendering engine of choice. While not perfect, it does the job for me - hence the th:href attributes instead of regular ones, and the @{} syntax.
Here's the thing - the first file has to be loaded as "text/css" otherwise, the browser refuses to apply its style, while the second file has to be loaded as "stylesheet/css", otherwise the browser blocks that.
In both cases, it claims that the files are of "application/json" type, and none of them are.
In this scenario, the first one won't load, but the second one will:
<link type="stylesheet/css" rel="stylesheet" th:href="...">
<link type="stylesheet/css" rel="stylesheet" th:href="...">
In this scenario, the second one won't load, but the first one will:
<link type="text/css" rel="stylesheet" th:href="...">
<link type="text/css" rel="stylesheet" th:href="...">
What gives and how do I figure out which MIME type is expected before the browser gets a stroke?
So, I have no idea why or how this fixed anything, but it did.
There was a file, dubbed tail-select.js, which imported tail.select.js. These are two distinct files and tail.select.js is the actual JS file for the library.
Even though tail.select.js didn't depend on tail-select.js - this import somehow affected it. After deleting the tail-select.js file, which seems to have erroneously made its way into the project - the CSS file loads just right, via rel="text/css".
I fail to understand how an off-shoot JS file importing another file and not doing anything with it managed to break the imported file, and furthermore - how this changed the way the CSS file is loaded. Nevertheless, it's (somehow) working now and I'm afraid to ask any more questions.